<template>
	<view class="box">
		<view class="photo" @click="navToDetailPage(item.id)" v-for="(item,index) in teamList" :key="index">
			<view class="photo_list">
				<view class="photo_header">
					<view class="photo_header_tou">
						<image :src="item.teamAvatar || '../../static/img/me/center_header.png'" mode=""></image>
					</view>
					<view class="photo_header_tit">
						<view class="tit_one">{{item.teamName}}</view>
						<view class="tit_two">{{item.teamSign}}</view>
					</view>
					
				</view>
				<view class="photo_bottom">
					<view class="photo_content">{{item.teamIntroduction}}</view>
					
					<view class="photo_image">
						<video class="video" v-show="item.videoCase" :src="item.videoCase[0]"></video>
					</view>
					
					<view class="photo_see">
						<view>{{item.lookUpNums}}人查看</view>
						<view>{{item.makeUpNums}}人制作</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				teamList: [],						//列表
				total:"",							//商品总数	
				page:"0",							//几页
				pages:"",							//一共多少页
				limit:"10",							//一页十条
				loadding: false,					//加载
				pullUpOn: true						//没有数据
			};
		},

		// 页面加载
		onLoad() {
			this.loadData();
			// var au = document.getElementsByTagName("video");
			// for(var i=0;i<au.length;i++){
			//     au[i].addEventListener("playing", function(){
			//         var this1=this;
			//         this.play();
			//         for(var b=0;b<au.length;b++){
			//             var this2=au[b];
			//             if(this1!==this2){
			//                 this2.pause();
			//             }
			//         }
			//     });
			// }
		},
		
		methods: {
			// 限制视频只播放一个
			pauseOther(e,VideoItems){
				console.log(e)
				 // 获取当前视频id
				let currentId = e;
				// 获取json对象并遍历, 停止非当前视频
				let trailer = VideoItems;
				for (let i = 0; i < trailer.length; i++) {
				  let temp = trailer[i].ID
				  if (temp !== currentId) {
					   this.$refs[temp][0].pause();
				  }
				}
			},
			
			// 下拉刷新
			onPullDownRefresh: function() {
				this.page = 1;
				this.pullUpOn = true;
				this.loadding = false;
				// 加载商品
				this.tui.request(
					'/app/team/list',
					'GET', 
					{
						page:this.page,
						limit:this.limit,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.total = res.data.total;
						this.page = res.data.page;
						this.pages = res.data.pages;
						this.teamList = res.data.list;
					}
				}).catch(err => {
					console.log(err)
				});
				//停止下拉刷新
				uni.stopPullDownRefresh();
			},
			
			// 上拉加载
			onReachBottom: function() {
				console.log(this.page)
				if (!this.pullUpOn) {
					return;
				}
				this.loadding = true;
				if (this.page == this.pages) {
					this.loadding = false;
					this.pullUpOn = false
				} else {
					++this.page;
					this.loadData();
					this.loadding = false
				}
			},
			
			// 加载商品
			loadData() {
				this.tui.request(
					'/app/team/list',
					'GET', 
					{
						page:this.page,
						limit:this.limit,
					},
					false,
					false,
					false,
				).then(res => {
					if(res.errno == 0){
						this.total = res.data.total;
						this.page = res.data.page;
						this.pages = res.data.pages;
						
						let worksList = res.data.list;
						worksList.forEach(item => {
							this.teamList.push(item);
						});						
					}
				}).catch(err => {
					console.log(err)
				});
			},

			// 详情页
			navToDetailPage(item) {
				let id = item;
				uni.navigateTo({
					url: `/pages/photography/photoDetail?id=${id}`
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}
	.box{
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}
	.photo{
		display: flex;
		flex-wrap: wrap;
		padding: 0 15px;
		background: #fff;
		border-bottom: 1px solid #F2F2F2;
		padding-bottom: 25upx;
	}
	.photo_list{
		width: 100%;
		margin-top: 25upx;
	}
	.photo_header{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		
		
		.photo_header_tou{
			width: 90upx;
			height: 90upx;
			
			image{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.photo_header_tit{
			padding-left: 10upx;
			
			.tit_one{
				
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
			}
			
			.tit_two{
				
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}
		}
	}
	
	.photo_bottom{
		
		.photo_content{
			padding-top: 10upx;
			padding-bottom: 10upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 39upx;
		}
		
		.photo_image{
			width: 100%;
			height: 380upx;
			
			
			image{
				width: 100%;
				height: 100%;
			}
			
		}
		
		.photo_see{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 10upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
	}
	.video{
		width: 100%;
		height: 100%;
	}
	
	
	
</style>
